.shopcart
  position: fixed
  left: 0
  bottom: 0
  z-index: 50
  width: 100%
  height: 48px
  .content
    display: flex
    background-color: #141d27
    font-size: 0
    color: rgba(255, 255, 255, 0.4)
    .content-left
      flex: 1
      .logo-wrapper
        display: inline-block
        position: relative
        top: -10px
        margin: 0 12px
        padding: 6px
        width: 56px
        height: 56px
        box-sizing: border-box
        vertical-align: top
        border-radius: 50%
        background-color: #141d27;
        .logo
          width: 100%
          height: 100%
          border-radius: 50%
          background-color: #2b343c
          text-align: center
          &.highlight
            background-color: rgb(0, 160, 220)
          .icon-shopping_cart
            line-height: 44px
            font-size: 24px
            color: #80858a
            border-radius: 16px
            &.highlight
              color: #fff
        .num
          position: absolute
          top: 0
          right: 0
          min-width: 24px
          height: 16px
          line-height: 16px
          text-align: center
          font-size: 9px;
          font-weight: 700
          color: #ffffff
          border-radius: 16px
          background-color: rgb(240, 20, 20)
          box-shadow: 0 4 0 0 rgba(0, 0, 0, 0.4)
      .price
        display: inline-block
        vertical-align: top
        margin-top: 12px
        box-sizing: border-box
        line-height: 24px
        padding-right: 12px
        border-right: 1px solid rgba(255, 255, 255, 0.1)
        font-size: 16px
        font-weight: 700
        &.highlight
          color: #fff
      .desc
        display: inline-block
        margin: 12px 0 0 12px
        line-height: 24px
        font-size: 13px
    .content-right
      flex: 0 0 105px
      width: 105px
      .pay
        font-size: 12px
        line-height: 48px
        text-align: center
        background-color: #2b333b
        font-weight: 700
        &.not-enough
          background-color: #2b333b
        &.enough
          background-color: #00b43c
          color: #fff
  .ball-container
    .ball
      position: fixed
      width: 16px
      height: 16px
      left: 32px
      bottom: 22px
      z-index: 200
      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
      .inner
        width: 16px
        height: 16px
        border-radius: 50%
        background-color: rgb(0, 160, 220)
        transition: all 0.4s linear
  .fold-enter-active, .fold-leave-active
    transition: all .5s ease;
  .fold-enter, .fold-leave-active
    transform: translate3d(0, 100%, 0);
  .shopcart-list
    position: absolute
    bottom: 48px
    left: 0
    z-index: -1
    width: 100%
    .list-header
      height: 40px
      padding: 0 18px
      line-height: 40px
      background-color: #f3f5f7
      border-bottom: 1px solid rgba(7, 17, 27, .1)
      .title
        float: left
        font-size: 14px
        color: rgb(7, 17, 27)
      .empty
        float: right
        font-size: 12px
        color: rgb(0, 160, 220)
    .list-content
      padding: 0 18px
      max-height: 217px
      overflow: hidden
      background-color: #fff;
      .food
        position: relative
        padding: 12px 0
        box-size: border-box
        border-1px(rgba(7, 17, 27, .1))
        .name
          line-height: 24px
          font-size: 14px
          color: rgb(7, 17, 27)
        .price
          position: absolute
          right: 90px
          bottom: 12px
          line-height: 24px
          font-size: 14px
          font-weight: 700
          color: rgb(240, 20, 20)
        .cartcontrol-wrapper
          position: absolute
          right: 0
          bottom: 6px
  .fade-mask-enter-active, .fade-mask-leave-active
    transition: all .3s
  .fade-mask-enter, .fade-mask-leave-active
    opacity: 0
  .list-mask
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    z-index: -2
    background-color: rgba(7, 17, 27, .6)
    backdrop-filter: blur(10px)

